<template>
  <div>
    <div class="block-item" style="color: #ff6262;" h-200rpx justify-evenly flex flex-col items-center v-if="order">
      <div relative>
        {{'增值税普通发票'}}<div class="circle"><div></div></div>
      </div>
      <div text-34rpx>{{unitPrice(order.receiptPrice, '￥')}}</div>
    </div>

    <div bg-white flex py-20rpx px-30rpx text-neutral-500 text-26rpx v-if="order">
      <div style="width: 50%;" text-center>
        <div mb-10rpx>抬头类型</div>
        <div>{{order.receiptTitle}}</div>
      </div>
      <div style="width: 50%;" text-center>
        <div mb-10rpx>发票状态</div>
        <div style="color: #ff6262;">{{order.receiptStatus === 1?'已开具':'暂未开具'}}</div>
      </div>
    </div>

    <div bg-white mt-10rpx px-40rpx leading-100rpx text-26rpx v-if="order" class="receiptType">
      <div><span>发票类型</span><span>增值税普通发票</span></div>
      <div><span>发票内容</span><span>{{order.receiptContent}}</span></div>
      <div><span>发票抬头</span><span>{{order.receiptTitle}}</span></div>
      <div v-if="order.taxpayerId"><span>纳税人识别号</span><span>{{order.taxpayerId}}</span></div>
    </div>


  </div>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app';
import { getReceiptDetail } from "@/api/order";
import { unitPrice } from '@/utils/filters';

const routerVal = ref<any>({}) // 路由信息
const order = ref<any>();

function init() {
  getReceiptDetail(routerVal.value.id).then((res) => {
    if (res.data.success) {
      order.value = res.data.result;
    }
  });
}

onLoad((options) => {
  routerVal.value = options
  init()
})
</script>

<style scoped lang="scss">
.circle {
  width: 166rpx;
  height: 65rpx;
  border: 1px solid #ff6262;
  border-radius: 100%;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  > div {
    width: 130rpx;
    height: 40rpx;
    border: 1px solid #ff6262;
    border-radius: 100%;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    position: absolute;
  }
}

.receiptType {
  > div {
    border-bottom: 2rpx solid #f6f6f6;
    display: flex;
    justify-content: space-between;
    > span:nth-of-type(2) {
      color: #999999;
    }
  }
  > div:nth-last-of-type(1) {
    border-bottom: none;
  }
}
</style>
